<!DOCTYPE html>
<html>
<!-- removed for now, causes problems in Firefox: manifest="svg-editor.manifest" -->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>




<link href="jquery/jquery-ui.min.css" rel="stylesheet">
<script src="jquery/jquery3.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
<script src="svg/svg.min.js"></script>

</head>

<body>

<div id="drawing"></div>


</body>

</html>


<script>

var draw = SVG('drawing').size(800, 600)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })


var ii = '<g>  <title>Layer 1</title>  <rect class="db" id="svg_db_1" height="68" width="223" y="121" x="76" stroke-width="5" stroke="#000000" fill="#FF0000"/>  <ellipse ry="62" rx="104" id="svg_2" cy="317" cx="445" stroke-width="5" stroke="#000000" fill="#FF0000"/>  <rect id="svg_db_2" height="83" width="177" y="279" x="78" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#005dff"/>  <rect stroke="#000000" class="db" id="svg_db_3" height="109.000002" width="182.999983" y="67" x="389" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="#3fff00"/> </g>';


draw.svg(ii) ;

var e1 = SVG.get('svg_db_1')

e1.fill('purple');



</script>